<template>
  <div class="ptBox">
    <div class="ptTop">
      <!--头部导航-->
      <PetTableNavbar v-if="isNavbar" />
      <!--筛选框-->
      <PetFiltrate />
    </div>
    <!--列表-->
    <PetContentList />
    <!--筛选弹出框-->
    <PetPopup v-if="store.state.popup.isPopup" />
    <PetCity v-if="store.state.area.isArea" />
  </div>
</template>

<script>
import PetTableNavbar from "@/views/petTable/component/PetTableNavbar";
import PetFiltrate from "@/views/petTable/component/PetFiltrate";
import PetPopup from "@/views/petTable/component/PetPopup";
import useScroll from "@/hooks/UseScroll";
import { useStore } from "vuex";
import PetContentList from "@/views/petTable/component/PetContentList";
import PetCity from "@/views/petTable/component/PetCity";
export default {
  name: "petTable",
  components: {
    PetCity,
    PetContentList,
    PetPopup,
    PetFiltrate,
    PetTableNavbar,
  },
  setup() {
    //滚动条滚动方向
    const { isNavbar } = useScroll();
    //筛选弹出框控制
    const store = useStore();
    return {
      isNavbar,
      store,
    };
  },
};
</script>

<style scoped>
.ptBox {
  padding-top: 4.1rem;
  width: 100%;
  box-sizing: border-box;
}
.ptTop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
</style>
